<template>
	<div class="wy-main user-info">
		<a-row style="margin-top: 10px;">
			<a-col :span="24">
				<p style="margin: 0;">
					<a-divider style="width: 4px;background: #15837A;" type="vertical" />
					<b style="color:#15837A;">基本资料</b>
					<a-divider style="width: 95%;margin-left: 20px;" />
				</p>
			</a-col>
		</a-row>
		<a-row type="flex"  align="middle">
			<a-col style="width: 80px;" :offset="1"><p class="height-100">登录名：</p></a-col>
			<a-col :span="4"><p class="height-100">芥末</p></a-col>
		</a-row>
		<a-row type="flex"  align="middle">
			<a-col style="width: 80px;" :offset="1"><p class="height-100">用户身份：</p></a-col>
			<a-col :span="4"><p class="height-100">个人</p></a-col>
		</a-row>
		<a-row type="flex"  align="middle">
			<a-col style="width: 80px;" :offset="1"><p class="height-100">真实姓名：</p></a-col>
			<a-col :span="4"><p class="height-100">张先生</p></a-col>
		</a-row>
		<a-form :form="form" @submit="handleSubmit">
			<a-row style="margin-top: 10px;">
				<a-col :span="24">
					<p style="margin: 0;">
						<a-divider style="width: 4px;background: #15837A;" type="vertical" />
						<b style="color:#15837A;">业务信息</b>
						<a-divider style="width: 95%;margin-left: 20px;" />
					</p>
				</a-col>
			</a-row>
				<a-form-item v-bind="formItemLayout" label="所属行业">
					<a-select v-decorator="[
			          'registrationtype',
			          {rules: [{ required: true, message: '请选择!' }]}
			        ]" placeholder="请选择">
						<a-select-option value="跨境贸易">
							跨境贸易
						</a-select-option>
						<a-select-option value="国际物流服务">
							国际物流服务
						</a-select-option>
						<a-select-option value="实体零售与批发">
							实体零售与批发
						</a-select-option>
						<a-select-option value="电子商务">
							电子商务
						</a-select-option>
						<a-select-option value="服饰鞋帽、文教和体育用品">
							服饰鞋帽、文教和体育用品
						</a-select-option>
						<a-select-option value="家用电品">
							家用电品
						</a-select-option>
						<a-select-option value="食品、饮料和烟草">
							食品、饮料和烟草
						</a-select-option>
						<a-select-option value="农业综合">
							农业综合
						</a-select-option>
						<a-select-option value="设备制造">
							设备制造
						</a-select-option>
					</a-select>
				</a-form-item>
				<a-form-item v-bind="formItemLayout" label="主营业务" >
					<a-textarea placeholder="提示：最多不超过400个字"  v-decorator="[ 'enterprisename', { rules: [ {required: true, message: '主营业务不能为空！',}]}]" :autosize="{ minRows: 4, maxRows: 6 }" />
				</a-form-item>
				<a-form-item v-bind="formItemLayout" label="网址" >
					<a-input placeholder="http://" v-decorator="[ 'loginname']" />
				</a-form-item>
				<a-row style="margin-top: 10px;">
					<a-col :span="24">
						<p style="margin: 0;">
							<a-divider style="width: 4px;background: #15837A;" type="vertical" />
							<b style="color:#15837A;">联系信息</b>
							<a-divider style="width: 95%;margin-left: 20px;" />
						</p>
					</a-col>
				</a-row>
				<a-form-item v-bind="formItemLayout" label="国家/地区" >
					<a-input v-decorator="[ 'enterprisename']" placeholder='请选择' />
				</a-form-item>
				<a-form-item v-bind="formItemLayout" label="所在地区">
					<a-row :gutter="8">
						<a-col :span="12">
							<a-input v-decorator="[ 'enterprisename']" placeholder='请选择'/>
						</a-col>
						<a-col :span="12">
							<a-input v-decorator="[ 'enterprisename']" placeholder='请选择' />
						</a-col>
					</a-row>
				</a-form-item>
				<a-form-item v-bind="formItemLayout" label="街道地址"  >
					<a-input v-decorator="[ 'enterprisename']" placeholder='请填写' />
				</a-form-item>
				<a-form-item v-bind="formItemLayout" label="移动电话"   >
					<a-input v-decorator="[ 'enterprisename']" placeholder='请填写' />
				</a-form-item>
				<a-form-item v-bind="formItemLayout" label="固定电话"   >
					<a-input v-decorator="[ 'enterprisename']" placeholder='请填写' />
				</a-form-item>
				<a-form-item v-bind="formItemLayout" label="传真"   >
					<a-input v-decorator="[ 'enterprisename']" placeholder='请填写' />
				</a-form-item>
				<a-form-item v-bind="formItemLayout" label="QQ"   >
					<a-input v-decorator="[ 'enterprisename']" placeholder='请填写' />
				</a-form-item>
				<a-form-item v-bind="formItemLayout" label="微信"   >
					<a-input v-decorator="[ 'enterprisename']" placeholder='请填写' />
				</a-form-item>
				<a-form-item v-bind="formItemLayout" label="电子邮箱"   >
					<a-input v-decorator="[ 'enterprisename']" placeholder='请填写' />
				</a-form-item>
				<a-row style="margin-top: 10px;">
					<a-col :span="24">
						<p style="margin: 0;">
							<a-divider style="width: 95%;margin-left: 20px;" />
						</p>
					</a-col>
				</a-row>
				<a-checkbox style="margin-left: 40px;"  v-decorator="['agreement', {valuePropName: 'checked'}]" >
					本人保证: 以上填写内容和材料附件真实无误，若填写或提供任何错误、不实或不完整的资料导致发生任何经济及法律纠纷， 本人愿承担一切责任！
				</a-checkbox>
				<a-form-item style="text-align: center;margin-top: 20px;" >
					<a-button type="primary" html-type="submit" style="width: 200px;" >
						立即认证
					</a-button>
				</a-form-item>
			</a-form>
	</div>
</template>
<script>
	export default {
		data() {
			return {
				formItemLayout: {
					labelCol: {
						xs: {
							span: 24
						},
						sm: {
							span: 3	
						},
					},
					wrapperCol: {
						xs: {
							span: 24
						},
						sm: {
							span: 10
						},
					},
				},
				tailFormItemLayout: {
					wrapperCol: {
						xs: {
							span: 24,
							offset: 16,
						},
						sm: {
							span: 12,
							offset: 2,
						},
					},
				},
			}
		},
		beforeCreate() {
			this.form = this.$form.createForm(this);
		},
		methods: {
			// 认证提交
			handleSubmit(e) {
				e.preventDefault();
				this.form.validateFieldsAndScroll((err, values) => {
					if(!err) {
						console.log('Received values of form: ', values);
					}
				});
			},
			// 检测确认密码
			handleConfirmBlur(e) {
				const value = e.target.value;
				this.confirmDirty = this.confirmDirty || !!value;
			},
			// 检测确认密码
			compareToFirstPassword(rule, value, callback) {
				const form = this.form;
				if(value && value !== form.getFieldValue('password')) {
					callback('您输入的两个密码不一致!');
				} else {
					callback();
				}
			},
			// 检测密码		
			validateToNextPassword(rule, value, callback) {
				const form = this.form;
				if(value && this.confirmDirty) {
					form.validateFields(['confirm'], {
						force: true
					});
				}
				callback();
			},
		}
	}
</script>

<style lang="less" scoped>
	.user-info {
		padding: 0 20px 40px 20px;
		.cont_title{
			padding-left: 10px;
			margin: 20px 0 0 10px;
			border-left: 2px solid #36948D;
			font-weight: 700;
		}
	}
</style>